<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 注意，从新域名下载的axios位置不对，有区别 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script> --> 
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <title>axios拦截器回顾</title>
</head>
<body>
    <button>点击发送成功请求</button>
    <button>点击发送失败请求</button>
    <script>
        const btn = document.querySelectorAll('button')
        btn[0].onclick = async function(){
            let result = await axios.get('http://api.xiaohigh.com/lol')
            console.log(result)
        }
        btn[1].onclick = async function(){
            // try{
            //     let result = await axios.get('http://api.xiaohigh.com/lo')
            // }catch(err){
            //     console.log('在响应失败之后，不会执行，但是在try...catch让过报错之后还是会执行')
            //     // console.log(result)
            // }
            let result = await axios.get('http://api.xiaohigh.com/lo')
        }

        // 打拦截器
        axios.interceptors.request.use((config)=>{
            console.log('请求拦截器成功') // 事实证明：请求拦截器总是成功的
            return config
        },(err)=>{
            return Promise.reject(err)
        })

        axios.interceptors.response.use((response)=>{
            console.log('响应成功了') // 请求成功，会返回成功的Promise对象，从而进入then方法的成功回调 -- 即该回调函数
            return response.data
        },(err)=>{
            console.log('响应失败了') // 请求失败，会返回失败的Promise对象，从而进入then方法的失败回调 -- 即该回调函数
            console.log(err)
            return Promise.reject(err)
        })
    </script>
</body>
</html>